angular.module('app.directives')

.directive('barChart', ['$window', function($window) {
    return {
        restrict: 'EA',
        link: function($scope, element, attrs) {
            var myChart = echarts.init(element[0]);
            var title = attrs.title;
            $scope.$watch(attrs.eData, function(newValue, oldValue, scope) {
                var xData = [], yData = [], data = newValue;
                angular.forEach(data.data, function(val) {
                    xData.push(val.name);
                    yData.push(val.value);
                });
                var leftBoundLabel = data.minNormal;
                var rightBoundLabel = data.maxNormal;
                var leftBoundIndex = xData.indexOf(leftBoundLabel);
                var rightBoundIndex = xData.indexOf(rightBoundLabel);
                var option = {
                    title: {
                        text: title,
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    // legend: {
                    //     data:['直方分布']
                    // },
                    xAxis: [{
                        type: 'category',
                        data: xData,
                        axisLabel: {
                            show: false
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [
                        {
                            type: 'bar',
                            data: yData,
                            name: '直方分布',
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        if (params.dataIndex < leftBoundIndex || params.dataIndex > rightBoundIndex) {
                                            return '#C1232B';
                                        }
                                        return '#9BCA63';
                                    }
                                }
                            },
                            markLine: {
                                symbolSize: 0,
                                data: [{
                                    xAxis: leftBoundLabel,
                                    label: {
                                        normal: {
                                            // formatter: 'u-3δ'
                                            show: false,
                                            formatter: 'LeftBound'
                                        },
                                    }
                                }, {
                                    xAxis: rightBoundLabel,
                                    label: {
                                        normal: {
                                            // formatter: 'u+3δ'
                                            show: false,
                                            formatter: 'RightBound'
                                        }
                                    }
                                }]
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }, true);
            $window.onresize = function() {
                myChart.resize();
            }
        }
    }
}]);
